<script setup>
import { ref } from 'vue'

const notifications = ref([
  { id: 1, name: '域名过期', value: true, type: [] },
  { id: 2, name: '域名注册', value: true, type: [] },
  { id: 3, name: '域名续费', value: true, type: [] },
  { id: 4, name: '域名转入', value: true, type: [] },
  { id: 5, name: '域名转出', value: true, type: [] },
  { id: 6, name: '域名PUSH', value: true, type: [] },
  { id: 7, name: '域名预订', value: true, type: [] },
  { id: 8, name: '域名竞价', value: true, type: [] },
  { id: 9, name: '余额提现', value: true, type: [] },
  { id: 10, name: '其他', value: true, type: [] }
]);
</script>

<template>
    <div class="bs-panel">
        <div class="bs-panel-body">
            <div class="page-title bold">通知设置</div>
            <div class="form-top" >
                <el-link type="primary" >恢复默认</el-link>
            </div>
            <div class="set-main">
                <el-row :gutter="40">
                    <el-col :span="8" v-for="notification in notifications" :key="notification.id">
                        <div class="set-card">
                            <div class="set-label">
                                <span>{{ notification.name }}</span>
                                <el-switch
                                v-model="notification.value"
                                inline-prompt
                                style="--el-switch-on-color: #e68f36;"
                                active-text="开"
                                inactive-text="关"
                                />
                            </div>
                            <div class="set-body">
                                <el-checkbox-group v-model="notification.type">
                                    <el-checkbox value="短信" name="type">
                                        短信
                                    </el-checkbox>
                                    <el-checkbox value="邮件" name="type">
                                        邮件
                                    </el-checkbox>
                                    <el-checkbox value="站内信" name="type">
                                        站内信
                                    </el-checkbox>
                                </el-checkbox-group>
                            </div>
                        </div>
                    </el-col>
                </el-row>
            </div>
        </div>
    </div>
</template>
<style scoped lang='scss'>
    .bs-panel-body{
        padding: 25px;
    }
    .form-footer,
    .form-top{
        height: 32px;
        text-align: right;
    }
    .set-card{
        padding: 10px;
        background-color: #f9f9f9;
        border: 1px solid #f9f9f9;
        border-radius: 5px;
        margin-bottom: 30px;
    }
    .set-label span{
        margin-right: 10px;
        color: #666;
    }
    .set-body{
        padding: 10px 0;
        display: flex;
        justify-content: center;
    }
    .set-main{
        padding: 0 30px;
    }



</style>